<template>
    <section>
        <el-dialog
                :title="ground.name+'-设置果树'"
                :visible.sync="visible"
                :value="value"
                width="800px"
        >
            <el-row>
                <el-col
                        :span="6"
                        :offset="17"
                >
                    <el-button
                            type="primary"
                            icon="el-icon-fa-plus"
                            size="small"
                            @click="treeShow=true"
                    >
                        添加果树
                    </el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="dataList"
                    border
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="id"
                        label="ID"
                />
                <el-table-column
                        prop="treeType.name"
                        label="果树类型"
                />
                <el-table-column
                        prop="treeAge"
                        label="树龄"
                />
                <el-table-column
                        prop="amount"
                        label="数量"
                />
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button
                                    title="编辑"
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-fa-edit"
                                    @click="treeEdit(scope.row)"
                            >
                                编辑
                            </el-button>
                            <el-button
                                    title="删除"
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-fa-trash"
                                    @click="treeDelete(scope.row)"
                            >
                                删除
                            </el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    :title="tree.id===0?'添加果树':'编辑果树'"
                    :visible.sync="treeShow"
                    append-to-body
                    width="30%"
                    @close="close"
            >
                <el-form
                        :model="tree"
                        :rules="rules"
                        ref="planForm"
                >
                    <el-form-item
                            label="果树类型"
                            :label-width="labelWidth"
                            prop="treeType"
                    >
                        <el-select
                                v-model="tree.treeType"
                                placeholder="请选择果树类型"
                        >
                            <el-option
                                    v-for="item in treeTypes"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item
                            label="树龄"
                            :label-width="labelWidth"
                            prop="treeAge"
                    >
                        <el-input
                                v-model="tree.treeAge"
                                auto-complete="off"
                                maxlength="11"
                                suffix-icon="fa fa-mobile"
                                placeholder="请填写树龄"
                        />
                    </el-form-item>
                    <el-form-item
                            label="数量"
                            :label-width="labelWidth"
                            prop="amount"
                    >
                        <el-input
                                v-model="tree.amount"
                                auto-complete="off"
                                maxlength="12"
                                suffix-icon="fa fa-mobile"
                                placeholder="请填写果树数量"
                        />
                    </el-form-item>
                </el-form>
                <div style="text-align: center;margin-top: 20px">
                    <el-button
                            size="small"
                            @click="cancelTree('planForm')"
                    >
                        取 消
                    </el-button>
                    <el-button
                            size="small"
                            type="primary"
                            @click="submit('planForm')"
                    >
                        确 定
                    </el-button>
                </div>
            </el-dialog>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button
                size="small"
                @click="cancle"
        >返回</el-button>

      </span>
        </el-dialog>
    </section>
</template>
<style>
</style>
<script>
    import {mapState} from "vuex";

    export default {
        name: "AddAndEdit",
        data() {
            return {
                visible: false,
                treeShow: false,
                editShow: false,
                labelWidth: "100px",
                dataList: [],
                treeTypes: [],
                ground: {
                    id: 0,
                    name: ''
                },
                tree: {
                    id: 0,
                    groundId: '',
                    treeType: '',
                    treeAge: '',
                    amount: ''
                },
                rules: {
                    treeType: [{required: true, message: "请选择果树类型", trigger: "blur"}],
                    treeAge: [{required: true, validator: this.$validator.decimalValid, trigger: "blur"}],
                    amount: [{required: true, validator: this.$validator.numValid, trigger: "blur"}],
                }
            };
        },
        computed: {
            ...mapState({
                codebooks: state => state.codebooks.codebooks
            })
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler: function (val) {
                    this.visible = val.show;
                    this.labelWidth = val.formLabelWidth || "120px";
                    this.ground = val.ground;
                    this.tree = {
                        id: 0,
                        groundId: val.ground.id
                    }
                    this.loadData();
                }

            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
            this.treeTypes = this.codebooks ? this.codebooks.treeTypes : [];
        },
        methods: {
            close() {
                this.cancelTree('planForm');
            },
            cancle() {
                this.visible = false;
                this.ground = {
                    id: 0
                };
                this.dataList = [];
            },
            cancelTree(formName) {
                this.treeShow = false;
                this.tree = {
                    id: 0,
                    groundId: this.ground.id
                }
                this.$refs[formName].clearValidate();
                //加载列表数据
                this.loadData();
            },
            loadData() {
                if (!this.ground || !this.ground.id || this.ground.id <= 0) {
                    return;
                }
                this.$api.ground.getTrees(this.ground.id, result => {
                    this.dataList = result.trees;
                });
            },
            treeEdit(row) {
                //查询
                this.$api.tree.detail(row.id, result => {
                    this.tree = result.tree;
                    this.tree.treeType = this.tree.treeType ? this.tree.treeType.value : '';
                    this.$delete(this.tree, "status");
                    this.treeShow = true;
                })
            },
            treeDelete(row) {
                this.$confirm("此操作将删除该果树, 是否继续?", "删除提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$api.tree.delete(row.id, () => {
                        this.$message({
                            type: "success",
                            message: "删除果树成功",
                            onClose: () => {
                                this.loadData();
                            }
                        });
                    });
                });
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const callback = () => {
                            this.cancelTree(formName);
                        };
                        this.tree.id > 0
                            ? this.$api.tree.update(this.tree, callback)
                            : this.$api.tree.save(this.tree, callback);
                    } else {
                        return false;
                    }
                });
            }
        },
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        show: false,
                        formLabelWidth: "150px",
                        ground: {
                            id: 0
                        }
                    };
                }
            }
        }
    };
</script>
